<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>My first game</title>
</head>
<body>
    <canvas id="main" width="600" height="500"></canvas>
    <div id="fpsShower"></div>
</body>
</html>
<script type="text/javascript" src="core/LighterGame.js"></script>
<script type="text/javascript" src="display/Tank.js"></script>
<script type="text/javascript" src="display/Obstacle.js"></script>
<script type="text/javascript" src="display/Bullet.js"></script>
<script type="text/javascript" src="display/Material.js"></script>
<script type="text/javascript" src="display/Symbol.js"></script>
<script type="text/javascript">
//-----------------------Some defines & objects---------------------------------
//TODO
//---------------------------Game start here------------------------------------
//---[INIT].load audio
MediaManager.loadMedia({
    "start": "music/start.wav",
    "fire": "music/fire.wav",
    "blast": "music/blast.wav",
    "hit": "music/hit.wav",
    "add": "music/add.wav"
});
//---[INIT].load image
ImageManager.loadImage({
    "player1": {
	"up": "images/p1tankU.gif",
	"down": "images/p1tankD.gif",
	"left": "images/p1tankL.gif",
	"right": "images/p1tankR.gif"
    },
    "enemyLevel1": {
	"up": "images/enemy1U.gif",
	"down": "images/enemy1D.gif",
	"left": "images/enemy1L.gif",
	"right": "images/enemy1R.gif"
    },
    "enemyLevel2": {
	"up": "images/enemy2U.gif",
	"down": "images/enemy2D.gif",
	"left": "images/enemy2L.gif",
	"right": "images/enemy2R.gif"
    },
    "enemyLevel3": {
	"up": "images/enemy3U.gif",
	"down": "images/enemy3D.gif",
	"left": "images/enemy3L.gif",
	"right": "images/enemy3R.gif"
    },
    "obstacle":{
	"wall": "images/wall.gif",
	"steel": "images/steel.gif"
    },
    "tank": {
	"blast1": "images/blast1.gif",
	"blast2": "images/blast2.gif",
	"blast3": "images/blast3.gif",
	"blast4": "images/blast4.gif",
	"blast5": "images/blast5.gif",
	"blast6": "images/blast6.gif",
	"blast7": "images/blast7.gif",
	"blast8": "images/blast8.gif",
	"born1": "images/born1.gif",
	"born2": "images/born2.gif",
	"born3": "images/born3.gif",
	"born4": "images/born4.gif"
    },
    "weapon": {
	"bullet": "images/bullet.gif"
    },
    "material": {
	"star": "images/star.gif",
	"peach": "images/peach.gif"
    },
    "main": {
	"symbol": "images/symbol.gif",
	"destroy": "images/destroy.gif"
    }
});

//---[*].make game
var game = new Stage(document.getElementById('main'));

//---[*].make obstacles
var obstacles = [];
for(var i = 0; i < 10; i++){
    for(var j = 0; j < 10; j++){
	if(j % 2 == 1){
	    obstacles.push(new Wall(30 * j, 30 * i));
	}else{
	    obstacles.push(new Steel(30 * j, 30 * i));
	}
    }
}
game.addSprite(obstacles);

//---[*].make symbol
//var symbol = new Symbol();
//game.addSprite(symbol);

//---[*].make player
var player = new PlayerTank(0, 0, 10);
//player.position = new Vector2(symbol.position.x - player.width, game.height - player.height);
player.position = new Vector2(player.width, game.height - player.height);
//bind key event to player
document.addEventListener('keydown', function(e){player.onKeyDown(e)});
document.addEventListener('keyup', function(e){player.onKeyUp(e)});
document.addEventListener('keypress', function(e){player.onKeyUp(e)});
//join
game.addSprite(player);

//---[*].make enemy
game.addSprite([new EnemyTankLevel1(400, 0),
		new EnemyTankLevel1(400, 100),
		new EnemyTankLevel1(400, 200),
		new EnemyTankLevel1(400, 350)]);

//---[FINAL].check resource loaded & start game
var loadTimer = setInterval(function(){
    if(ImageManager.isLoadedAll()){
	clearInterval(loadTimer);
	//Main codes here...
	game.start(60, document.getElementById('fpsShower'));
    }
}, 20);
</script>
